<!--
 * @Description: 第三方应用维护
 * @Author: fxg
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-04-08 15:05:24
-->
<template>
	<div class="pages_content ThirdpartyApp">
		<el-container>
			<el-header>
				<breaDcrumb />
			</el-header>
			<el-main>
				<div class="header_right" @click="showCardNav = !showCardNav">
					<div class="title">搜索</div>
					<div>
						<transition name="from"></transition>
						<span v-show="!showCardNav"><i style="margin-right: 5px;" class="el-icon-arrow-down"></i></span>
						<transition name="to"></transition>
						<span v-show="showCardNav"><i style="margin-right: 5px;" class="el-icon-arrow-up"></i></span>
					</div>
				</div>
				<div v-show="showCardNav" class="hr"></div>
				<el-collapse-transition>
					<div v-show="showCardNav">
						<div class="search">
							<span style="display: inline-block;margin-bottom: 10px;">
								<span style="margin-right: 12px;">appKey</span>
								<el-input v-model="tableParam.appKey" style="width: 200px;" clearable placeholder="请输入" />
							</span>
							<span style="margin-left: 24px;">
								<span style="margin-right: 12px;">名称</span>
								<el-input v-model="tableParam.name" style="width: 20%;max-width: 200px;" clearable placeholder="请输入" />
							</span>
							<el-button icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), queryPage()">查 询</el-button>
							<el-button size="medium" class="bottom_all_two" @click="reset()">重 置</el-button>
						</div>
					</div>
				</el-collapse-transition>
				<div class="hr"></div>
				<div class="card">
					<div class="card_nav">
						<div>
							<el-button size="small" class="bottom_all" style="margin-left: 0;" @click="add()">
								<i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
								添加
							</el-button>
							<el-button size="small" class="bottom_two" @click="batchUpdateOrDelete('update_status', 0)">
								<i class="icon iconfont iconicon_button_delete" style="font-size: 12px;"></i>
								删除
							</el-button>
						</div>
						<div>
							<el-dropdown :hide-on-click="false" trigger="click" style="margin: 0 20px;">
								<el-link :underline="false">
									<i class="el-icon-sort el-icon--left"></i>
									筛选
								</el-link>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item v-for="(item, index) in table" :key="index">
										<el-checkbox v-model="item.status">{{ item.label }}</el-checkbox>
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<el-link :underline="false" @click="Download()">
								<i class="el-icon-upload2 el-icon--left"></i>
								导出
							</el-link>
						</div>
					</div>
					<div class="card_info" :style="style">
						<el-table ref="multipleTable" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
							<el-table-column align="center" type="selection" width="50"></el-table-column>
							<template v-for="(item, index) in table">
								<el-table-column v-if="item.status" :key="index" :label="item.label" align="center" :width="item.width">
									<template slot-scope="scope">
										<span v-if="scope.row.syncContact == 0 && item.label == '是否同步联系方式'" style="color:#969799;">否</span>
										<span v-if="scope.row.syncContact == 1 && item.label == '是否同步联系方式'" style="color:#00A754;">是</span>
										<el-button v-if="item.label == '操作'" class="bottom_one" size="mini" @click="update(scope.row)">
											<i class="icon iconfont iconicon_button_modification" style="font-size: 12px;"></i>
											修改
										</el-button>
										<span v-if="item.label !== '操作' && item.label !== '是否同步联系方式'">{{ scope.row[item.prop] }}</span>
									</template>
								</el-table-column>
							</template>
						</el-table>
					</div>
				</div>
			</el-main>
			<div class="card_bottom">
				<div class="card_bottom_left">
					<div class="top_page_totle">总共{{ total }}条</div>
					<el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="queryPage()"></el-pagination>
				</div>
				<div>
					<el-button size="mini" class="bottom_all_two" icon="el-icon-refresh-right" @click="queryPage()">刷新</el-button>
				</div>
			</div>
		</el-container>
		<!-- 添加 -->
		<el-dialog v-dialogDrag :visible.sync="dialogVisible" width="680px" :before-close="resefrom">
			<span slot="title" class="dialog-title">{{ dialogtitle }}</span>
			<div class="dialoginfo">
				<div>
					<span>
						<div style="width: 100px;">appKey：</div>
						<el-input v-model="from.appKey" placeholder="请输入appKey" clearable />
					</span>
					<span>
						<div style="width: 100px;">appSecret：</div>
						<el-input v-model="from.appSecret" placeholder="请输入appSecret" clearable />
					</span>
				</div>
				<div>
					<span>
						<div style="width: 100px;">名称：</div>
						<el-input v-model="from.name" placeholder="请输入名称" clearable />
					</span>
					<span>
						<div style="width: 100px;">同步服务ip：</div>
						<el-input v-model="from.syncIp" placeholder="请输入同步服务ip" clearable />
					</span>
				</div>
				<div>
					<span>
						<div style="width: 100px;">同步服务mac：</div>
						<el-input v-model="from.syncMac" placeholder="请输入同步服务mac" clearable />
					</span>
				</div>
				<div class="app_bg">
					<span>
						<div style="width: 100px;">私钥文件：</div>
						<el-input v-model="from.privateKey" placeholder="请输入同步服务ip" clearable />
					</span>
				</div>

				<div>
					<span>
						<div style="width: 140px;">是否同步联系方式：</div>
						<el-radio v-model="from.syncContact" label="0">否</el-radio>
						<el-radio v-model="from.syncContact" label="1">是</el-radio>
					</span>
				</div>
				<div class="textarea_input">
					<div style="width: 140px;">重定向页面地址：</div>
					<el-input v-model="from.redirectAddress" placeholder="请填写重定向页面地址" class="textarea" type="textarea" rows="5"></el-input>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button class="bottom_all_two" @click="resefrom()">取 消</el-button>
				<el-button class="bottom_all" @click="save()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import breaDcrumb from '@/components/breadcrumb';
import { mapGetters } from 'vuex';
import { queryPage, saveOrUpdate, updateStatus } from '@/api/interface/ThirdpartyApp.js';
export default {
	components: {
		breaDcrumb
	},
	data() {
		return {
			/*添加修改弹窗*/
			dialogVisible: false,
			dialogtitle: '添加第三方应用维护',
			options: [],
			/*弹要修改过着添加的数据*/
			from: {
				appKey: '',
				appSecret: '',
				name: '',
				privateKey: '',
				syncIp: '',
				syncMac: '',
				syncContact: '1',
				redirectAddress: ''
			},
			/*判断收起展开*/
			showCardNav: true,
			/*搜索关键字段*/
			/*列表展示*/
			table: [
				{ label: 'appKey', width: 'auto', prop: 'appKey', status: true },
				{ label: 'appSecret', width: 'auto', prop: 'appSecret', status: true },
				{ label: '名称', width: 'auto', prop: 'name', status: true },
				{ label: '私钥文件', width: 'auto', prop: 'privateKey', status: true },
				{ label: '创建时间', width: 'auto', prop: 'createTime', status: true },
				{ label: '更新时间', width: 'auto', prop: 'updateTime', status: true },
				{ label: '同步服务ip', width: 'auto', prop: 'syncIp', status: true },
				{ label: '同步服务mac', width: 'auto', prop: 'syncMac', status: true },
				{ label: '重定向页面地址', width: 'auto', prop: 'redirectAddress', status: true },
				{ label: '是否同步联系方式', width: 'auto', prop: 'syncContact', status: true },
				{ label: '操作', width: '120', prop: '', status: true }
			],
			/*列表选中的数据集*/
			tableParam: {
				page: 1,
				pageSize: 10,
				appKey: '',
				name: ''
			},
			total: 0,
			ids: [],
			sortIds: [],
			tableData: []
		};
	},
	mounted() {
		this.queryPage();
	},
	methods: {
		/*下载*/
		Download() {
			window.location.href = process.env.VUE_APP_API_APIHOST + '/system/base/thirdapp/export';
		},
		/*传文件*/
		value(e) {
			e.target.value = '';
		},
		afterRead() {
			let img_file = this.$refs.inputer;
			var formData = new FormData();
			var fileObj = img_file.files[0];
			if (fileObj.type !== 'image/jpeg' && fileObj.type !== 'image/png') {
				this.$notify({
					title: '提示',
					message: '请选择图片文件',
					duration: 1000
				});
				return;
			}
			formData.append('file', fileObj);
		},
		/*重置*/
		reset() {
			this.tableParam.appKey = '';
			this.tableParam.name = '';
			this.queryPage();
		},
		/*删除，禁用，启用，排序*/
		batchUpdateOrDelete(type, status) {
			if (this.ids.length == 0) {
				this.$message({
					message: '请选择要操作的数据项',
					type: 'warning'
				});
				return;
			}
			if (type === 'update_status') {
				this.$confirm('此操作将永久删除该信息?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: 'bottom_all_two',
					confirmButtonClass: 'bottom_all',
					type: 'warning'
				})
					.then(() => {
						updateStatus({
							ids: this.ids,
							status: status,
							type: type
						}).then(() => {
							this.reset();
						});
					})
					.catch(() => { });
			} else {
				updateStatus({
					ids: this.ids,
					status: status,
					type: type
				}).then(() => {
					this.queryPage();
				});
			}
		},
		/*保存或修改*/
		save() {
			saveOrUpdate(this.from).then((res) => {
				if (res.code === 1001) {
					this.$message.success('添加成功');
					this.resefrom();
					this.queryPage();
				}
			});
		},
		resefrom() {
			this.dialogVisible = false;
			this.from = {
				appKey: '',
				appSecret: '',
				name: '',
				privateKey: '0',
				syncIp: '',
				syncMac: '',
				syncContact: '',
				redirectAddress: ''
			};
		},
		/*获取列表*/
		queryPage() {
			queryPage(this.tableParam).then(res => {
				this.total = res.data.totalRows;
				this.tableData = res.data.data;
			});
		},
		add() {
			this.dialogtitle = '添加第三方应用维护';
			this.dialogVisible = true;
		},
		update(data) {
			let str = JSON.stringify(data);
			this.from = JSON.parse(str);
			this.from.syncContact = JSON.stringify(data.syncContact);
			this.dialogtitle = '修改第三方应用维护';
			this.dialogVisible = true;
			str = null;
		},
		/*批量选择*/
		toggleSelection(rows) {
			if (rows) {
				rows.forEach(row => {
					this.$refs.multipleTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
		},
		handleSelectionChange(val) {
			this.ids = [];
			this.sortIds = [];
			val.forEach(item => {
				this.ids.push(item.id);
				this.sortIds.push({ id: item.id, sortNum: item.sortNum });
			});
		}
	},
	computed: {
		...mapGetters({
			screenWidth: 'getscreenWidth',
			screenHeight: 'getscreenHeight',
			Collapse: 'getsCollapse'
		}),
		style() {
			let num = 0;
			if (this.Collapse) {
				num = this.screenWidth - 124;
			} else {
				num = this.screenWidth - 220;
			}
			return 'width:' + num + 'px;';
		}
	}
};
</script>
<style lang="scss" scoped>
.ThirdpartyApp {
  .el-link {
    i {
      color: $bg_color;
    }
  }
  .el-link:hover {
    color: $bg_color;
  }
  font-size: $font_size;
  .el-main {
    padding: 0;
  }
  .el-main::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  .el-main::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  .el-main::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
  }
  .el-main::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  .el-main::-webkit-scrollbar-corner {
    background: #179a16;
  }
  .search {
    padding: 20px;
  }
  .card {
  }
  .header_right {
    @include discen_al;
    padding: 0 20px;
    justify-content: space-between;
    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
    }
  }
  .card_nav {
    padding: 0 20px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .card_info {
    padding: 0 20px;
  }
  .card_bottom {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    .card_bottom_left {
      display: flex;
      align-items: center;
      font-size: $font_size;
    }
  }
  .dialoginfo {
    width: 640px;
    > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      > span {
        display: flex;
        align-items: center;
      }
      .el-input,
      .el-select {
        width: 190px;
      }
    }
    .textarea_input {
      padding-top: 10px;
      align-items: flex-start;
      height: 118px;
    }
    .textarea {
      width: 550px;
    }
    .app_bg {
      padding-top: 10px;
      align-items: flex-start;
      justify-content: flex-start;
    }
  }
}
</style>
